<!--
 * @Author: 梁卓
 * @Date: 2022-02-15 17:34:21
 * @LastEditTime: 2022-02-15 22:51:15
 * @LastEditors: Please set LastEditors
 * @Description: 活动的签到情况
 * @FilePath: \dreamUi\src\componets\echarts\ActivityCheckIn.vue
-->
<template>
  <div class="checkIn_page">
    <div style="width: 100%;height: 100%;" ref="checkIn_echarts"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'Activitycheckin',
  props: ['signNum'],
  watch: {
    'signNum': {
      handler(val,old) {
        this.myEcharts(val)
      }
    }
  },
  data() {
    return {
      chart: null
    };
  },

  mounted() {
    this.myEcharts()
    window.addEventListener('resize',this.chart)
  },
  destroyed() {
    window.removeEventListener('resize',this.chart);
  },
  methods: {
    myEcharts(num) {
      this.chart = echarts.init(this.$refs.checkIn_echarts);
      const size = this.$refs.checkIn_echarts.offsetWidth;
      //配置图表
      this.chart.setOption({
        title: {
          text: '活动的签到人数',
          textStyle: {
            fontSize: size / 20
          }
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}人'
        },
        series: [{
          name: '活动的签到人数',
          type: 'gauge',
          progress: {
            show: true
          },
          detail: {
            valueAnimation: true,
            formatter: '{value} 人',
            textStyle: {
            fontSize: size / 20
          }
          },
          data: [
            {
              value: num,
              name: '签到人数'
            }
          ]
        }]
      });
      this.chart.resize();
    }
  },
};
</script>

<style scoped>
.checkIn_page {
  width: 100%;
  height: 100%;
}
</style>